<template>
  <div>
    <p ref="pRef">num is {{ num }}</p>
    <p>
      <button @click="num++">+1</button>
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 1
    }
  },
  // 钩子是跟data同级的
  // 组件实例创建前
  beforeCreate () {
    console.log('---初次渲染阶段---beforeCreate---')
  },
  // 组件实例创建后（发请求）
  created () {
    console.log('---初次渲染阶段---created---')
  },
  // 初始值渲染出来之前
  beforeMount () {
    console.log('---初次渲染阶段---beforeMount---')
  },
  // 初始值渲染出来之后（初次渲染完毕）
  // 获取dom节点、也可以发请求
  mounted () {
    // console.log(this.$refs.pRef)
    console.log('---初次渲染阶段---mounted---')
  },
  // 模型改变了，视图变化之前
  beforeUpdate () {
    console.log('---再次渲染阶段---beforeUpdate---')
  },
  // 模型变了，视图也更新完毕了
  // 获取更改之后的dom节点
  updated () {
    console.log('---再次渲染阶段---updated---')
  },
  // 清理定时器，做一些清理工作
  beforeDestroy () {
    console.log('---销毁阶段---beforeDestroy')
  },
  destroyed () {
    console.log('---销毁阶段---destroyed')
  }
}
</script>
